<template>
	<view class="card-main">
		<view class="card-header">
			<view class="header-title">
				麻辣炒肉
			</view>
		</view>
		<view class="" style="height:12rpx;">

		</view>
		<view class="card-tip">
			<view class="tip-filled">
				1人份
			</view>
			<view class="tip-filled">
				特价菜
			</view>
			<view class="tip-filled">
				限购
			</view>
		</view>
		<view class="" style="height:12rpx;">
		
		</view>
		<view class="card-footer">
			<view class="footer-price" style="font-weight: bold;">
				￥23
			</view>
			<view class="footer-cart">
				<view class="card-add">
					加入购物车
				</view>
			</view>
		</view>
	</view>
</template>

<script>
</script>

<style lang="scss" scoped>
	.card-main {
		background-color: white;
		padding: 36rpx;
		box-sizing: border-box;
		width: 750rpx;
		height: 264rpx;
		.card-header {
			.header-title {
				font-size: 36rpx;
				font-weight: bolder;
			}
		}

		.card-tip {
			display: flex;

			.tip-filled {
				margin-right: 24rpx;
				height: 52rpx;
				background-color: #F2E1CA;
				border-radius: 12rpx;
				font-size: 28rpx;
				text-align: center;
				padding: 6rpx 16rpx;
				box-sizing: border-box;
				color: #A57B3F;
			}
		}

		.card-footer {
			width:678rpx;
			display: flex;
			align-items: center;
			justify-content: space-between;
			.footer-price{
				font-size: 48rpx;
				color:black;
			}
			.card-add{
				width:190rpx;
				height:56rpx;
				line-height: 56rpx;
				font-size: 28rpx;
				background-color: #C79E62;
				color:white;
				border-radius: 12rpx;
				text-align: center;
			}
		}
	}
</style>